﻿@{
    ViewBag.Title = "Applicant";
}
<h1>
    Manage Applicants</h1>
<div align="center">
    <table id="jqgApplicants" cellpadding="0" cellspacing="0">
    </table>
    <div id="jqgpApplicants" style="text-align: center;">
    </div>
</div>
@section JavaScript{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqgApplicants').jqGrid({
                //url from which data should get
                url: '@Url.Action("Applicants")',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'POST',
                //columns names
                colNames: [' ApplicantId', 'First Name', 'Middle Name', 'Last Name', 'Address', 'City', 'State', 'Zip', 'Mobile No', 'Home Phone', 'Email', 'Gender', 'DateOfBirth', 'Martial Status', 'Degree Name', 'Skill Name', 'Experience', 'Resume Size', 'Resume'],
                //columns model
                colModel: [
                    { name: 'ApplicantId', index: 'ApplicantId', align: 'left', editable: false },
                    { name: 'FirstName', index: 'FirstName', align: 'left', editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 1, colpos: 1} },
                    { name: 'MiddleName', index: 'MiddleName', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 1, colpos: 2} },
                    { name: 'LastName', index: 'LastName', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 1, colpos: 3} },
                    { name: 'Address', index: 'Address', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 2, colpos: 1} },
                    { name: 'City', index: 'City', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 2, colpos: 2} },
                    { name: 'State', index: 'State', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 2, colpos: 3} },
                    { name: 'Zip', index: 'Zip', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 3, colpos: 1} },
                    { name: 'MobileNo', index: 'MobileNo', align: 'left', editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 3, colpos: 2} },
                    { name: 'HomePhone', index: 'HomePhone', hidden: true, align: 'left', editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 3, colpos: 3} },
                    { name: 'Email', index: 'Email', align: 'left', hidden: false, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 4, colpos: 1} },
                    { name: 'Gender', index: 'Gender', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 4, colpos: 2} },
                    { name: 'DateOfBirth', index: 'DateOfBirth', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100,
                        editoptions: {
                            size: 10, maxlengh: 10,
                            dataInit: function (element) {
                                $(element).datepicker({ dateFormat: 'yy/mm/dd' });
                            }
                        },
                        editrules: { required: true, edithidden: true },
                        formoptions: { rowpos: 4, colpos: 3 }
                    },
                    { name: 'MartialStatus', index: 'MartialStatus', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 5, colpos: 1} },
                    { name: 'DegreeName', index: 'DegreeName', align: 'left', hidden: true, editable: true, edittype: 'select', width: 100,
                        editoptions: { multiple: false,
                            size: 1,
                            dataUrl: '@Url.Action("GetDegrees", "Applicant")',
                            buildSelect: function (data) {
                                var response = jQuery.parseJSON(data);
                                var s = '<select>';
                                if (response && response.length) {
                                    for (var i = 0, l = response.length; i < l; i++) {
                                        var ri = response[i];
                                        s += '<option value="' + ri + '">' + ri + '</option>';
                                    }
                                }
                                return s + "</select>";
                            }
                        },
                        editrules: { required: true, edithidden: true },
                        formoptions: { rowpos: 5, colpos: 2 }
                    },
                    { name: 'SkillName', index: 'SkillName', align: 'left', hidden: true, editable: true, edittype: 'select', width: 100,
                        editoptions: { multiple: false,
                            size: 1,
                            dataUrl: '@Url.Action("GetSkills", "Applicant")',
                            buildSelect: function (data) {
                                var response = jQuery.parseJSON(data);
                                var s = '<select>';
                                if (response && response.length) {
                                    for (var i = 0, l = response.length; i < l; i++) {
                                        var ri = response[i];
                                        s += '<option value="' + ri + '">' + ri + '</option>';
                                    }
                                }
                                return s + "</select>";
                            }
                        },
                        editrules: { required: true, edithidden: true },
                        formoptions: { rowpos: 5, colpos: 3}
                    },
                    { name: 'Experience', index: 'Experience', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 6, colpos: 1} },
                    { name: 'ResumeSize', index: 'ResumeSize', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 6, colpos: 2} },
                    { name: 'Resume', index: 'Resume', align: 'left', hidden: true, editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 6, colpos: 3} },
                ],
                //pager for grid
                pager: $('#jqgpApplicants'),
                //number of rows per page
                rowNum: 5,
                //initial sorting column
                sortname: 'ApplicantId',
                //initial sorting direction
                sortorder: 'asc',
                //we want to display total record count
                viewrecords: true,
                //grid height
                height: '100%'
            });
            $('#jqgApplicants').jqGrid('navGrid', '#jqgpApplicants',
                { add: true, del: true, edit: true, search: false },
                { width: 'auto', url: '@Url.Action("UpdateApplicant")' },
                { width: 'auto', url: '@Url.Action("InsertApplicant")' },
                { width: 'auto', url: '@Url.Action("DeleteApplicant")' });
        });
    </script>
}
@section PageDescription{
    <h1>
        Applicant</h1>
    <h3>
        Applicant details</h3>
    <p>
        Maintains information about the Applicant with various details such as applicantid, first name, mobile no and emailid.</p>
}
